<template>
  <el-dialog title="多人协同分配" :visible.sync="dialogVisible" :before-close="handleClose">
    <div class="wrapper">
      <el-table :data="cooperateList" max-height="500" style="width: 100%">
        <el-table-column prop="num" label="章序号" width="80">
          <template slot-scope="scope">{{ scope.row.blockIndex || '' }}</template>
        </el-table-column>
        <el-table-column prop="contentTitle" label="章名称"> </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">{{ getStatus(scope.row) }}</template>
        </el-table-column>
        <el-table-column prop="cooperatorName" label="人员">
          <template slot-scope="scope">
            <el-input
              size="small"
              placeholder="请选择"
              suffix-icon="el-icon-user"
              v-model="userList[scope.$index]"
              :disabled="getDisabled(scope)"
              @focus="handleShowUserDialog(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="mini" v-if="canCancle(scope)" @click="cancle(scope.row)">取消</el-button>
            <el-button type="text" size="mini" v-if="showSubmit(scope.row)" @click="submit(scope.row)">提交</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import { MessageBox } from 'element-ui'
import { getCooperateList, finishCollaborate, modifyCollaborator } from '@/api'
import { getCooperatorId } from '@/utils/helpers'

export default {
  name: 'CollaborateDialog',
  data() {
    return {
      dialogVisible: false
    }
  },
  computed: {
    cooperateList() {
      return this.$store.state.xmleditor.cooperateList
    },
    userList() {
      return this.cooperateList.map((item) => item?.assignData?.cooperatorName)
    }
  },
  methods: {
    show() {
      this.dialogVisible = true
      getCooperateList()
    },
    getDisabled(scope) {
      return !this.$store.getters.isChief || (scope.row.assignData && scope.row.assignData.status == 2)
    },
    canCancle(scope) {
      return this.userList[scope.$index] && this.$store.getters.isChief
    },
    showSubmit(row) {
      const editable = this.$store.state.xmleditor.editableIds.includes(row?.contentId)
      const isAssigner = getCooperatorId() + '' === row?.assignData?.cooperatorId + ''
      return editable && row?.assignData?.status != 3 && isAssigner
    },
    async submit(row) {
      try {
        await MessageBox.confirm(`提交后无法继续编辑，是否确认提交?`, '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          distinguishCancelAndClose: true,
          type: 'warning'
        })
        await finishCollaborate({ docNo: this.$store.state.xmleditor.editorConfig.docNo, contentId: row?.contentId })
      } catch (error) {
        console.log(error)
      }
    },
    cancle(row) {
      modifyCollaborator({
        cooperator: '',
        cooperatorId: '',
        cooperatorName: '',
        docNo: this.$store.state.xmleditor.editorConfig.docNo,
        contentId: row.contentId,
        contentTitle: row.contentTitle
      })
    },
    async handleConfirm() {},
    handleShowUserDialog(row) {
      this.$store.commit('xmleditor/SET_CURRENT_COOPERATOR', row)
      this.$emit('show-user-dialog')
    },
    getStatus(row) {
      if (!row.isAssign) return '未分配'
      if (row.assignData) {
        const { status } = row.assignData
        return status == '1' ? '未开始' : status == '2' ? '协作中' : '已结束'
      }
    },
    handleClose() {
      this.dialogVisible = false
      if (this.$store.state.xmleditor.collaborateStatusChange) {
        location.reload()
      }
    }
  }
}
</script>

<style scoped>
::v-deep .el-dialog__body {
  padding-top: 0;
  padding-bottom: 10px;
}
.wrapper {
  min-height: 400px;
  overflow: auto;
}
</style>
